<template>
  <CollapsibleSection
    title="反馈模块"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
    <ItemListManager
      :items="formData.feedbackItems || []"
      item-title="反馈项目"
      add-button-text="添加反馈"
      add-button-color="#f44336"
      @add="addFeedbackItem"
      @remove="removeFeedbackItem"
      @update="updateFeedbackItem"
    >
      <template #default="{ item, index, update }">
        <ItemWithImagesCard
          :model-value="item"
          @update:model-value="(data) => update(index, data)"
          :show-title="true"
          title-label="反馈标题"
          title-placeholder="请输入反馈标题"
          description-label="反馈内容"
          description-placeholder="请输入反馈内容"
          :description-rows="4"
          border-color="border-red-300"
          :max-images="9"
        />
      </template>
    </ItemListManager>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useItemManagement } from '@/composables/useItemManagement'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import ItemListManager from '@/components/ItemListManager.vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const { formData, addFeedbackItem, removeFeedbackItem, updateFeedbackItem } = useItemManagement()

// 初始化检查：当feedbackItems为空时自动添加一项
onMounted(() => {
  setTimeout(() => {
    const items = formData.value?.feedbackItems || []
    console.log('反馈模块初始化检查，当前项目数:', items.length)
    if (items.length === 0) {
      console.log('开始添加默认反馈项目')
      addFeedbackItem()
    }
  }, 2000)
})
</script>

<style scoped lang="scss">
// 样式已在模板中定义
</style>
